<script setup lang="ts">
import {reactive} from 'vue'

const data = reactive({
  selectTabIndex: 0,
  tabList: [
    {
      name: '自助授权',
      path: '/platformAuth'
    },
    {
      name: '配置',
      path: '/platformConfig'
    },
    {
      name: '手机',
      path: '/platformLogcat'
    },
    {
      name: '关于平台',
      path: '/platformInfo'
    }]
})

const selectTab = (index) => {
  data.selectTabIndex = index
}
</script>

<template>
  <div class="home-title-layout hor-layout-side-center">
    <div class="hor-layout-center">
      <img class="app-logo" src="../../assets/img/app-logo-white.png">
      <router-link v-for="(item,index) in data.tabList" :to="item.path">
        <div class="title-tab-item" :class="{'selected-item':data.selectTabIndex==index}"
             :key="index" @click="selectTab(index)">
          {{ item.name }}
        </div>
      </router-link>
    </div>
    <div class="hor-layout-center">
      <router-link to="/">
        <img class="close-img" src="../../assets/img/close-icon.png">
      </router-link>
    </div>
  </div>
  <router-view></router-view>
</template>

<style lang="less">
.home-title-layout {
  height: 9vh;
  background: #4aa3ff;

  .app-logo {
    width: 45px;
    height: 45px;
    margin: 20px;
  }

  .title-tab-item {
    position: relative;
    color: white;
    font-size: 22px;
    font-weight: bold;
    padding: 0px 20px;
    border-right: 1px solid #777777;
  }

  .selected-item::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 5px);
    bottom: -13px;
  }

  .close-img {
    width: 25px;
    height: 25px;
    margin-right: 20px;
  }
}
</style>
